<style>
  .pic {
    height: 100px;
    cursor: pointer;
    padding-right: 5px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.9);
    transform: scale(1);
    transition: box-shadow 0.4s, transform 0.3s;
  }

  .pic:hover {
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s;
  }

  .green {
    color: white;
    background-color: #1ab394;
    padding: 5px 8px;
    border-radius: 14%;
  }

  .red {
    color: white;
    background-color: red;
    padding: 5px 8px;
    border-radius: 14%;
  }

  .row {
    margin-bottom: 15px;
  }

  .map {
    height: 50vh;
    width: 100%;
  }
</style>
<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <form id="idForm">
      <input type="hidden" name="id" v-model="id"/>
      <input type="hidden" name="areaIds" v-model="areaIds"/>
    </form>
    <div class="row">
      <div class="col-sm-12">
        <h3>{{result.riverCourseName}}-【{{result.executorRole}}】</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">日志是否正常：</div>
        <div class="col-sm-8 text-left"><span :class="result.status === '异常' ? 'red' : 'green'">{{result.status}}</span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">巡查河道：</div>
        <div class="col-sm-8 text-left">{{result.riverCourseName}}</div>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">任务开始时间：</div>
        <div class="col-sm-8 text-left">{{result.startTime | date('yyyy-MM-dd HH:mm:ss')}}</div>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">任务结束时间：</div>
        <div class="col-sm-8 text-left">{{result.endTime | date('yyyy-MM-dd HH:mm:ss')}}</div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">实际开始时间：</div>
        <div class="col-sm-8 text-left">{{result.excStartTime | date('yyyy-MM-dd HH:mm:ss')}}</div>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">实际结束时间：</div>
        <div class="col-sm-8 text-left">{{result.excEndTime | date('yyyy-MM-dd HH:mm:ss')}}</div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4 text-right">
        <div class="col-sm-4 text-right">任务内容：</div>
        <div class="col-sm-8 text-left">{{result.taskContent}}</div>
      </div>
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">巡查公里数：</div>
        <div class="col-sm-8">{{result.patrolKilometer}}</div>
      </div>
      <div class="col-sm-4" v-if="result.status === '异常'">
        <div class="col-sm-4 text-right">日志内容：</div>
        <div class="col-sm-8 text-left">{{result.eventInfo}}</div>
      </div>
    </div>
    <div class="row" v-if="result.status === '异常'">
      <div class="col-sm-4">
        <div class="col-sm-4 text-right">照片：</div>
        <div class="col-sm-8 text-left">
          <table class="table-hover">
            <tr>
              <td v-for="pic in result.treatmentPrePics.split(',')" v-on:click="lookImage(pic)">
                <img class="pic" :src="pic"/>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <ul class="nav nav-list" style="height: 1px;background-color: #ccc;margin-top: 15px;margin-bottom: 15px">
      <li></li>
    </ul>
    <div class="row" style="margin-bottom: 30px" ref="imageTofile" id="jietu">
      <div class="col-sm-12" style="height: 50vh">轨迹记录
        <div class="col-sm-12 map" id="map">
          <baidu-map
            ak='keY5Bh4GNuG79iCNIGgSl31pXpmjjW50'
            :mapClick="false"
            :center="center"
            :zoom="zoom"
            :dragging="true"
            :scroll-wheel-zoom="true"
            class="map"
            @ready="handler"
            @moving="syncCenterAndZoom"
            @moveend="syncCenterAndZoom"
            @zoomend="syncCenterAndZoom"
          >
          </baidu-map>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 col-sm-offset-5">
        <button type="button" class="btn btn-primary" v-on:click="download()">下载</button> |
        <!--<button type="button" class="btn btn-default" v-on:click="back()">返回</button>-->
        <a @click="back()" href="javascript:">返回</a>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/datepicker-vendor.js'
  import {$storage, axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/pageTag'
  import {BaiduMap, BmCityList, BmGeolocation, BmLocalSearch, BmMarker, BmNavigation, BmView} from 'vue-baidu-map'

  export default {
    data() {
      return {
        result: {data: {pageIndex: 1, data: []}, message: ''},
        tagPages: '',
        areaIds: JSON.parse($storage.getItem('staff')).areaId ? JSON.parse($storage.getItem('staff')).areaId : '',
        id: this.$route.params.id,
        // 百度地图初始化数据
        baidumapSwitch: false,
        center: {lng: 104.859354, lat: 29.76873},
        marker: {lng: 104.859354, lat: 29.76873},
        zoom: 12,
        location: '',
        keyword: '河流',
        path: [],
        htmlUrl: ''
      }
    },
    components: {
      BaiduMap, BmCityList, BmGeolocation, BmLocalSearch, BmMarker, BmNavigation, BmView
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      this.staff.init(function () {
        that.page(1);
      });
    },
    watch: {
      // result: function (val) {
      //   this.$nextTick(function () { console.info('变量result渲染完成'); }
      // }
    },
    methods: {
      // 百度地图初始化（这个一定要！否则地图回加载不出来）
      handler({BMap, map}) {
        let that = window.$vueApp = this;
        map.enableScrollWheelZoom(true);// 百度地图API功能
        setTimeout(() => { // 延迟500毫秒，防止path参数还没有获取到，导致轨迹加载失败
          // 加载轨迹
          let point = [];
          // let path = that.result.patrolTrack;
          that.path = JSON.parse(that.path); // 数据库中的json串要注意标准格式，使用双引号，js代码中使用单引号可以，但是数据库传过来的使用单引号在parse的时候报错
          for (let i = 0; i < that.path.length; i++) {
            point.push(new BMap.Point(that.path[i].lng, that.path[i].lat));
          }
          let pl = new BMap.Polyline(point, {
            strokeColor: '#FE595D',
            strokeWeight: 6,
            strokeOpacity: 0.5
          });
          map.addOverlay(pl);
          map.setViewport(point);// 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
          // 最后的点--带文字标签的覆盖物
          let startIcon = new BMap.Icon('/static/img/icon.jpg', new BMap.Size(23, 25), {
            // 指定定位位置。
            // 当标注显示在地图上时，其所指向的地理位置距离图标左上
            // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
            // 图标中央下端的尖角位置。
            anchor: new BMap.Size(10, 25),
            // 设置图片偏移。
            // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
            // 需要指定大图的偏移位置，此做法与css sprites技术类似。
            imageOffset: new BMap.Size(0, 0 - 0)   // 设置图片偏移
          });
          // var marker = new BMapGL.Marker(point, {icon: myIcon});        // 创建标注对象并添加到地图
          let pointStart = new BMap.Point(that.path[0].lng, that.path[0].lat);
          let markerStart = new BMap.Marker(pointStart, {icon: startIcon}); // 创建点
          // let markerStart = new BMap.Marker(pointStart); // 创建点
          map.addOverlay(markerStart);                 // 加载标注
          // let labelStart = new BMap.Label('起点', {offset: new BMap.Size(20, -10)});
          // markerStart.setLabel(labelStart);
          let pointEnd = new BMap.Point(that.path[that.path.length - 1].lng, that.path[that.path.length - 1].lat);
          let markerEnd = new BMap.Marker(pointEnd, {icon: startIcon}); // 创建点
          map.addOverlay(markerEnd);                 // 加载标注
          // let labelEnd = new BMap.Label('终点', {offset: new BMap.Size(20, -10)});
          // markerEnd.setLabel(labelEnd);
        }, 500)
      },
      // 双向绑定经纬度以及缩放尺寸
      syncCenterAndZoom(e) {
        const {lng, lat} = e.target.getCenter();
        this.center.lng = lng;
        this.center.lat = lat;
        this.zoom = e.target.getZoom();
      },
      page(pageIndex) {
        let that = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.patrolTaskLog.detail
          , $('#idForm').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result.data;
            that.path = that.result.patrolTrack;
          } else {
            alert(result.message);
          }
        });
      },
      back() {
        let that = this;
        that.$router.go(-1)
      },
      lookImage(url) {
        let name = '查看图片';    // 网页名称，可为空;
        let iWidth = 800;         // 弹出窗口的宽度;
        let iHeight = 600;        // 弹出窗口的高度;
        // 获得窗口的垂直位置
        let iTop = (window.screen.availHeight - 30 - iHeight) / 2;
        // 获得窗口的水平位置
        let iLeft = (window.screen.availWidth - 10 - iWidth) / 2;
        window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=0,titlebar=no');
      },
      download() {
        let that = this;
          let a = document.createElement('a');
          a.download = name || '河长日志'; // 设置图片地址
          a.href = site.patrolTaskLog.download + '?id=' + that.id + '&areaIds=' + that.areaIds + '&Authorization=' + $storage.getItem('authorizationToken') + '&zoom=' + that.zoom;
          a.click();
          a = null;
      }
    }
  }
</script>
